import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'recorddetails_logic.dart';
import 'recorddetails_state.dart';

class RecorddetailsPage extends StatelessWidget {
  const RecorddetailsPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final RecorddetailsLogic logic = Get.put(RecorddetailsLogic());
    final RecorddetailsState state = Get.find<RecorddetailsLogic>().state;

    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          children: [
            _buildHeader(logic, state),
            _buildInfoBar(state),
            _buildTabBar(logic, state),
            Expanded(
              child: Obx(() => _buildTabContent(state)),
            ),
            _buildAudioPlayer(logic, state),
          ],
        ),
      ),
    );
  }

  Widget _buildHeader(RecorddetailsLogic logic, RecorddetailsState state) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          IconButton(
            icon: Icon(Icons.arrow_back_ios, color: Colors.black),
            onPressed: () => Get.back(),
            padding: EdgeInsets.zero,
            constraints: BoxConstraints(),
          ),
          Row(
            children: [
              IconButton(
                icon: Icon(Icons.text_fields, color: Colors.black54),
                onPressed: () => logic.editText(),
              ),
              IconButton(
                icon: Icon(Icons.search, color: Colors.black54),
                onPressed: () => logic.searchContent(),
              ),
              IconButton(
                icon: Icon(Icons.auto_awesome, color: Colors.black54),
                onPressed: () => logic.generateAISummary(),
              ),
              IconButton(
                icon: Icon(Icons.fullscreen, color: Colors.black54),
                onPressed: () => logic.toggleFullscreen(),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildInfoBar(RecorddetailsState state) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 16.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            state.title.value,
            style: TextStyle(
              fontSize: 24.sp,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
          SizedBox(height: 12.h),
          Row(
            children: [
              Icon(
                Icons.calendar_today,
                color: Colors.blue,
                size: 16.r,
              ),
              SizedBox(width: 4.w),
              Text(
                state.date.value,
                style: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.black87,
                ),
              ),
              SizedBox(width: 16.w),
              Icon(
                Icons.access_time,
                color: Colors.blue,
                size: 16.r,
              ),
              SizedBox(width: 4.w),
              Text(
                state.time.value,
                style: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.black87,
                ),
              ),
              SizedBox(width: 16.w),
              Icon(
                Icons.text_fields,
                color: Colors.blue,
                size: 16.r,
              ),
              SizedBox(width: 4.w),
              Text(
                '${state.wordCount.value}字',
                style: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.black87,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildTabBar(RecorddetailsLogic logic, RecorddetailsState state) {
    return Container(
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: Colors.grey.shade300,
            width: 1.w,
          ),
        ),
      ),
      child: Row(
        children: [
          for (int i = 0; i < state.tabs.length; i++)
            Expanded(
              child: GestureDetector(
                onTap: () => logic.switchTab(i),
                child: Obx(() => Container(
                  padding: EdgeInsets.symmetric(vertical: 12.h),
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(
                        color: state.currentTabIndex.value == i
                            ? Colors.blue
                            : Colors.transparent,
                        width: 3.w,
                      ),
                    ),
                  ),
                  child: Text(
                    state.tabs[i],
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: state.currentTabIndex.value == i
                          ? FontWeight.bold
                          : FontWeight.normal,
                      color: state.currentTabIndex.value == i
                          ? Colors.blue
                          : Colors.black87,
                    ),
                  ),
                )),
              ),
            ),
        ],
      ),
    );
  }

  Widget _buildTabContent(RecorddetailsState state) {
    switch (state.currentTabIndex.value) {
      case 0:
        return _buildTranscriptTab(state);
      case 1:
        return _buildSummaryTab(state);
      case 2:
        return _buildTodoTab(state);
      default:
        return Container();
    }
  }

  Widget _buildTranscriptTab(RecorddetailsState state) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(16.w),
      child: Text(
        state.transcript.value,
        style: TextStyle(
          fontSize: 16.sp,
          height: 1.5,
          color: Colors.black87,
        ),
      ),
    );
  }

  Widget _buildSummaryTab(RecorddetailsState state) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(16.w),
      child: Text(
        state.summary.value,
        style: TextStyle(
          fontSize: 16.sp,
          height: 1.5,
          color: Colors.black87,
        ),
      ),
    );
  }

  Widget _buildTodoTab(RecorddetailsState state) {
    return ListView.builder(
      padding: EdgeInsets.all(16.w),
      itemCount: state.todoItems.length,
      itemBuilder: (context, index) {
        final todo = state.todoItems[index];
        return Container(
          margin: EdgeInsets.only(bottom: 12.h),
          padding: EdgeInsets.all(12.w),
          decoration: BoxDecoration(
            color: Colors.grey.shade100,
            borderRadius: BorderRadius.circular(8.r),
          ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin: EdgeInsets.only(top: 4.h),
                width: 16.w,
                height: 16.h,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(
                    color: Colors.blue,
                    width: 2.w,
                  ),
                ),
              ),
              SizedBox(width: 12.w),
              Expanded(
                child: Text(
                  todo,
                  style: TextStyle(
                    fontSize: 16.sp,
                    color: Colors.black87,
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  Widget _buildAudioPlayer(RecorddetailsLogic logic, RecorddetailsState state) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 10,
            offset: Offset(0, -2),
          ),
        ],
      ),
      child: Column(
        children: [
          Obx(() => Slider(
            value: state.currentPosition.value,
            min: 0,
            max: state.totalDuration.value,
            activeColor: Colors.blue,
            inactiveColor: Colors.grey.shade300,
            onChanged: (value) => logic.seekTo(value),
          )),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Obx(() => Text(
                  _formatDuration(state.currentPosition.value.toInt()),
                  style: TextStyle(
                    fontSize: 14.sp,
                    color: Colors.black87,
                  ),
                )),
                Obx(() => Text(
                  _formatDuration(state.totalDuration.value.toInt()),
                  style: TextStyle(
                    fontSize: 14.sp,
                    color: Colors.black87,
                  ),
                )),
              ],
            ),
          ),
          SizedBox(height: 8.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              _buildPlayerButton(
                icon: Icons.speed,
                label: '倍数',
                onTap: () => logic.changePlaybackSpeed(),
              ),
              _buildPlayerButton(
                icon: Icons.replay_5,
                label: '后退5秒',
                onTap: () => logic.rewindFiveSeconds(),
              ),
              GestureDetector(
                onTap: () => logic.togglePlayPause(),
                child: Container(
                  width: 60.w,
                  height: 60.h,
                  decoration: BoxDecoration(
                    color: Colors.blue,
                    shape: BoxShape.circle,
                  ),
                  child: Obx(() => Icon(
                    state.isPlaying.value ? Icons.pause : Icons.play_arrow,
                    color: Colors.white,
                    size: 30.r,
                  )),
                ),
              ),
              _buildPlayerButton(
                icon: Icons.forward_5,
                label: '前进5秒',
                onTap: () => logic.forwardFiveSeconds(),
              ),
              _buildPlayerButton(
                icon: Icons.star_border,
                label: '收藏',
                onTap: () => logic.toggleFavorite(),
              ),
            ],
          ),
          SizedBox(height: 8.h),
        ],
      ),
    );
  }

  Widget _buildPlayerButton({
    required IconData icon,
    required String label,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Column(
        children: [
          Icon(
            icon,
            color: Colors.grey.shade700,
            size: 24.r,
          ),
          SizedBox(height: 4.h),
          Text(
            label,
            style: TextStyle(
              fontSize: 12.sp,
              color: Colors.grey.shade700,
            ),
          ),
        ],
      ),
    );
  }

  String _formatDuration(int seconds) {
    final minutes = seconds ~/ 60;
    final remainingSeconds = seconds % 60;
    return '$minutes:${remainingSeconds.toString().padLeft(2, '0')}';
  }
}
